<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="description" content="登陆"/>
  <title>登录</title>

  <meta charset="utf-8"/>
  <meta name="author" content=""/>
  <meta name="keywords" content=""/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>

  <script src="../js/jquery.min.js"></script>
  <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="../css/jq22.css"/>
  <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/>
</head>
<body>
<!-- begin -->
<div id="login" class="container-fluid">
  <div class="wrapper">
    <div class="login">
      <form action="#" method="post" class="container offset1 loginform">
        <div id="owl-login">
          <div class="hand"></div>
          <div class="hand hand-r"></div>
          <div class="arms">
            <div class="arm"></div>
            <div class="arm arm-r"></div>
          </div>
        </div>
        <div class="pad">
          <input type="hidden" name="_csrf" value="9IAtUxV2CatyxHiK2LxzOsT6wtBE6h8BpzOmk="/>
          <div class="control-group">
            <div class="controls">
              <label for="userName" class="control-label fa fa-envelope"></label>
              <input id="userName" type="text" name="email" placeholder="用户名" tabindex="1" autofocus="autofocus" class="form-control input-medium"/>
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <label for="password" class="control-label fa fa-asterisk"></label>
              <input id="password" type="password" name="password" placeholder="密码" tabindex="2" class="form-control input-medium"/>
            </div>
          </div>
        </div>
        <div class="form-actions">
          <span id="msg" style="line-height: 30px; color: red" class="text-muted pull-left"></span>
          <!--<a href="#" tabindex="5" class="btn pull-left btn-link text-muted">忘 记 密 码 ？</a>-->
          <!--<a href="#" tabindex="6" class="btn btn-link text-muted">注   册</a>-->
          <button type="button" id="doLogin" tabindex="4" onclick="func.login()" class="btn btn-primary">
            登 陆
          </button>
        </div>
      </form>
    </div>
  </div>
  <script>
    $(function () {
      $('#login #password').focus(function () {
        $('#owl-login').addClass('password');
      }).blur(function () {
        $('#owl-login').removeClass('password');
      });
    });

    var func = {
      login: function () {
        var loginData = {
          username: $("#userName").val(),
          password: $("#password").val()
        };
        /* 发送Ajax */
        $.ajax({
          url : "../login",
          data : loginData,
          dataType: "json",
          type: "POST",
          success : function(resp){
            //登陆成功
            if (resp.success) {
              $("#msg").css("color","green").html(resp.data);
              setTimeout(function() {
                window.location.href = "../page/index";
              }, 800);
            } else {
              // 登陆失败.
              $("#msg").html(resp.errorMsg);
            }
          }
        });
      }
    }
  </script>
</div>
<!-- end -->
</body>
</html>